import G6 from '@antv/g6'
// import { angle } from '../../../utils/utils'

// export function drawCustomNode () {
//     G6.registerNode('diamond', {
//         options: {
//             stateStyles: {
//                 hover: {},
//                 selected: {
//                     stroke: '#209101',
//                     lineWidth: 2,
//                     fill: 'steelblue'
//                 }
//             }
//         },
//         draw (cfg, group) {
//             const keyShape = group.addShape('path', {
//                 attrs: {
//                     path: this.getPath(cfg),
//                     stroke: cfg.color || '#209101'
//                 },
//                 name: 'path-shape',
//                 draggable: true
//             })
//             if (cfg.label) {
//                 group.addShape('text', {
//                     attrs: {
//                         x: 0,
//                         y: 0,
//                         textAlign: 'center',
//                         textBaseline: 'middle',
//                         text: cfg.label,
//                         fill: '#666'
//                     },
//                     name: 'text-shape',
//                     draggable: true
//                 })
//             }
//             return keyShape
//         },
//         getPath (cfg) {
//             const size = cfg.size || [40, 40]
//             const width = size[0]
//             const height = size[1]
//             return [
//                 ['M', 0, -height / 2],
//                 ['L', width / 2, 0],
//                 ['L', 0, height / 2],
//                 ['L', -width / 2, 0],
//                 ['Z']
//             ]
//         },
//         update (cfg, node) {
//             const group = node.getContainer() // 获取容器
//             const shape = group.get('children')[0] // 按照添加的顺序
//             const style = {
//                 path: this.getPath(cfg),
//                 stroke: cfg.color
//             }
//             shape.attr(style) // 更新属性
//             // 更新文本的逻辑类似，但是需要考虑 cfg.label 是否存在的问题
//             // 通过 label.attr() 更新文本属性即可
//         }
//     })
// }

export function drawImage () {
    G6.registerNode('customeImg', {
        afterDraw (cfg, group) {
            console.log(cfg, '23')
            if (cfg.icon && cfg.icon.show) {
                group.addShape('image', {
                    attrs: {
                        x: 5,
                        y: 5,
                        width: 20,
                        height: 20,
                        img: cfg.icon.url,
                        fill: '#666'
                    },
                    name: 'status-icon'
                })
            }
        }
    }, 'image')
}

// export function extendImageNode () {
//     G6.registerNode('')
// }
// // 自定义边
// export function customEdge () {
//     G6.registerEdge('hvh', {
//         labelAutoRotate: true,
//         draw (cfg, group) {
//             const startPoint = cfg.startPoint
//             const endPoint = cfg.endPoint
//             const shape = group.addShape('path', {
//                 attrs: {
//                     stroke: '#333',
//                     path: [
//                         ['M', startPoint.x, startPoint.y],
//                         ['L', endPoint.x, endPoint.y]
//                     ]
//                 },
//                 // must be assigned in G6 3.3 and later versions. it can be any value you want
//                 name: 'path-shape'
//             })
//             if (cfg.label && cfg.label.length) {
//                 const midPoint = shape.getPoint(0.5)
//                 group.addShape('text', {
//                     attrs: {
//                         x: midPoint.x,
//                         y: midPoint.y - 10,
//                         textAlign: 'center',
//                         text: cfg.label[0],
//                         fill: '#666'
//                     },
//                     name: 'up-text-shape'
//                 })
//                 group.addShape('text', {
//                     attrs: {
//                         x: midPoint.x,
//                         y: midPoint.y + 10,
//                         textAlign: 'center',
//                         textBaseline: 'middle',
//                         text: cfg.label[1],
//                         fill: '#666'
//                     },
//                     name: 'down-text-shape'
//                 })
//                 // upLabel.rotateAtStart(k)
//                 // downLabel.rotateAtStart(k)
//                 // upLabel.rotateAtPoint(startPoint.x, startPoint.y, k)
//                 // downLabel.rotateAtPoint(k)
//             }
//
//             return shape
//         }
//     })
// }

// custom the edge with multiple labels
G6.registerEdge('multipleLabelsEdge', {
    options: {
        style: {
            stroke: '#000'
        }
    },
    labelAutoRotate: true,
    draw (cfg, group) {
        const startPoint = cfg.startPoint
        const endPoint = cfg.endPoint
        const stroke = (cfg.style && cfg.style.stroke) || this.options.style.stroke

        const shape = group.addShape('path', {
            attrs: {
                stroke,
                path: [
                    ['M', startPoint.x, startPoint.y],
                    ['L', endPoint.x, endPoint.y]
                ]
            },
            name: 'path-shape'
        })
        if (cfg.label && cfg.label.length) {
            const midPoint = shape.getPoint(0.5)
            // the left label
            group.addShape('text', {
                attrs: {
                    text: cfg.label[0],
                    fill: '#595959',
                    textAlign: 'start',
                    textBaseline: 'middle',
                    x: midPoint.x,
                    y: midPoint.y - 10
                },
                name: 'left-text-shape'
            })
            if (cfg.label.length > 1) {
                // the right label
                group.addShape('text', {
                    attrs: {
                        text: cfg.label[1],
                        fill: '#595959',
                        textAlign: 'end',
                        textBaseline: 'middle',
                        x: midPoint.x,
                        y: midPoint.y + 10
                    },
                    name: 'right-text-shape'
                })
            }
        }
        // return the keyShape
        return shape
    }
})
